import React,{useState,useEffect} from 'react'
import { Input,Button,Card,Pagination } from 'antd';
import '../App1.css'
import axios from '../utils/request';
import { useNavigate } from 'react-router-dom';
const { Meta } = Card;

export default function Shou() {
    const [list,setList]=useState([])
    const [page,setPage]=useState(1)
    const [pageSize,setPageSize]=useState(4)
    // 获取
    const getList=async()=>{
        const res=await axios.get(`http://localhost:3000/list?_page=${page}&_limit=${pageSize}`)
        setList(res.data)
    }
   
    // 分页
    const gotopage=(page,pageSize)=>{
        setPage(page)
        setPageSize(pageSize)
        getList(page,pageSize)
    }
    useEffect(()=>{
        getList(page,pageSize)
    },[page,pageSize])
    const nav=useNavigate()
    const gotoEdit=(id)=>{
        nav(`/detail/${id}`)
    }
  return (
    <div>
        <p>{list.length} 辆</p>
        <div className='main'>
        {
            list.map(item=>{
                return <div key={item.id}>
                     <Card
                        hoverable
                        style={{ width: 240 }}
                        cover={<img alt="example" src={item.img} />}
                        onClick={()=>{
                            gotoEdit(item.id)
                        }}
                    >
                        <Meta title={item.title} description={item.price}/>
                    </Card>

                </div>
            })
        }
        </div>
        <Pagination 
        defaultCurrent={page} 
        defaultPageSize={pageSize} 
        total={8} 
        onChange={gotopage}
        />
    </div>
  )
}
